<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/react.development.js"></script>
    <script src="js/react-dom.development.js"></script>
    <script src="js/babel.min.js"></script>
    <style>
    .text{
        color:pink;
    }
    .react{
        border: 5px solid yellow;
    }
    li{
        list-style: none;
    }
    .welcome{
        border: 5px solid green;  
        margin: 5px;
        color: blueviolet;
    }
    </style>
</head>
<body>
    <div id="app"></div>
    <script type='text/babel'>
//        function ProductList(){
//            let products=[
//                {id:'001',name:'🍎'},
//                {id:'002',name:'🍸'},
//                {id:'003',name:'🚗'}
//            ]
//            let lis=[];
//            for(let product of products){
//                let li=<li key={product.id}>{product.name}</li>;
//                lis.push(li);
//            }
//            return(
//                <ul>
//                      {lis}
//                </ul>
//            )

//        }
// console.log( ProductList());

//        ReactDOM.render(
//            <div>
//                < ProductList />
//            </div>,
//            document.getElementById('app')
//        )


let products=[
               {id:'001',name:'🍎'},
               {id:'002',name:'🍸'},
               {id:'003',name:'🚗'},
               {id:"004",name:'💻'},
               {id:"005",name:'🍉'}
           ]


function Welcome(props){
    return <p>欢迎 {props.name}{props.doing}</p>
}           

let welcome=<Welcome name='达康书记' doing='视察工作'/>;

function BtnClick(props){
    console.log('你被点击了')
}

function ProductList(props){
        console.log(props)
           let lis=[];
           for(let goods of props.goodsList){
               let li=<li key={goods.id}>{goods.name}</li>;
               lis.push(li);
           }
           return(
            
               <div className="text">困得不行、、、
               <ul>
                     {lis}
               </ul>
              <div className='welcome'>{props.inner}</div>
             <button onClick={props.btnclick}>点击</button>
            </div>
           )
       }

 ReactDOM.render(
           <div className='react'>
               <ProductList goodsList={products} inner={welcome} btnclick={BtnClick} />
           </div>,
           document.getElementById('app')
       )
    </script>
</body>
</html>